<template>
  <div class="login-root">
    <ViewHead></ViewHead>
    <div class="root-content">
      <div class="sign-up yj">
        <el-row>
          <el-col :offset="8" :span="8" style="padding-top:50px;">
            <el-card class="box-card" style="padding:20px;">
              <el-form ref="form" :model="form" size="mini" label-width="80px">
                <el-form-item label="登录账号">
                  <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                  <div>
                    <el-button @click="onLogin" style="width:100%" size="medium" type="primary"><i class="el-icon-user-solid"></i>登 录</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
        <div class="copyright">{{this.config.copyright}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import ViewHead from "~/base/ViewHead.vue";

export default {
  name: "Login",
  components: {
    ViewHead,
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    loginComplate(auth) {
      this.$cookies.set("token", auth.token);
      this.config.user = auth;
      this.utils.emit("event_login_complate");
    },
    onLogin() {
      if (!this.form.username || !this.form.password) {
        this.$notify({
          title: "登录提示",
          message: "登录账号和密码不能为空",
          type: "warning",
        });
        return;
      }

      this.utils.http(
        "post",
        "/webapi/websession/login",
        {
          username: this.form.username,
          password: this.$md5(this.form.password),
        },
        (data) => {
          this.loginComplate(data);
        }
      );
    },
  },
  mounted() {
    this.utils.refreshRootContentHeight();
    this.utils.cleanUserData();
    this.utils.emit("event_login_logout");
  },
};
</script>

<style>
.login-root .sign-up {
  height: 100%;
  background-color: #ffffff;
}

.login-root .copyright {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  text-align: center;
  width: 100%;
  color: #606266;
}
</style>